<template lang="">
  <div id="printArea">
    <table>
      <tr>
        <td>姓名</td>
        <td>{{ user.user_info.company_name }}</td>
      </tr>
      <!-- <tr>
        <td>电话</td>
        <td>{{ user.user_info.phone }}</td>
      </tr> -->
      <tr>
        <td>角色</td>
        <td>{{ user.role_name }}</td>
      </tr>
      <tr>
        <td>主账号</td>
        <td>{{ user.parent_username }}</td>
      </tr>
      <tr>
        <td>账号</td>
        <td>{{ user.username }}</td>
      </tr>
      <tr>
        <td>IP</td>
        <td>{{ user.user_info.last_login_ip }}</td>
      </tr>
      <tr>
        <td>最近登录时间</td>
        <td>{{ user.user_info.expire_time }}</td>
      </tr>
    </table>
    <el-button @click='push_password' class="bth_pass">修改密码</el-button>
    <el-dialog title="修改密码" :visible.sync="isuser" width="30%" :close-on-click-modal="false" @close="close_dialog">

        <el-row>
            <el-col :span="4">
                旧密码
            </el-col>
            <el-col :span="20">
                <el-input v-model="old_password"></el-input>
            </el-col>
        </el-row>
        <el-row  style='margin-bottom:15px'>
            <el-col :span="4">
                新密码
            </el-col>
            <el-col :span="20">
                <el-input v-model="new_password"></el-input>
            </el-col>
        </el-row>
        <el-row  style='margin-bottom:15px'>
            <el-col :span="4">
                确认新密码
            </el-col>
            <el-col :span="20">
                <el-input v-model="new_passwords"></el-input>
            </el-col>
        </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isuser = false">取 消</el-button>
        <el-button @click="yes_setpassword">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUserInfo,changePassword } from "@/api/user";
export default {
  data() {
    return {
        isuser:false,
        user: {},
        new_password:'',
        old_password:'',
        new_passwords:''
    };
  },
  mounted() {
    this.get_UserInfo();
  },
  methods: {
    get_UserInfo() {
      getUserInfo().then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.user = res.data;
        }
      });
    },
    push_password(){
        this.isuser=true;
    },
    close_dialog(){
        this.new_password=''
        this.old_password=''
    },
    yes_setpassword(){

        if(this.old_password==''){
            this.$message({
                type: "error",
                message: "请输入旧密码~",
             });
            return false;
        }
        if(this.new_password==''){
            this.$message({
                type: "error",
                message: "请输入旧密码~",
             });
            return false;
        }else{
            if(this.new_password!=this.new_passwords){
                this.$message({
                type: "error",
                message: "两次输入的密码不一致，请重新输入~",
             });
             return false;
            }
        }
        changePassword({
            new_password:this.new_password,
            old_password:this.old_password
        }).then(res=>{
            if(res.code==200){
                this.$message.success("修改成功");
                this.isuser=false;
            }
        })
    }
  },
};
</script>
<style scoped>
#printArea {
  width: 100%;
  margin: 0 auto;
}

#printArea > div {
  margin-top: 50px;
}
#printArea > div:first-child {
  margin-top: 0px;
}
#printArea table {
  width: 50%;
  /* margin: 0 auto; */
  border-collapse: collapse;
}
#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}
#printArea table {
  border: 1px solid #c5c5c5;
}
#printArea table td {
  border: 1px solid #c5c5c5;
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding: 0;
  margin: 0;
  text-align: left;
  padding: 0 15px;
  box-sizing: border-box;
}

#printArea table tr td:nth-child(1) {
  width: 130px;
  text-align: center;
}



.el-row{
    display:flex;
    align-items:center;
    margin-bottom: 15px;
}


.bth_pass{
    background: #108cbd;
    color: #fff;
    margin-top: 15px;
}
</style>
